@import "lib/styles/variable.scss";

.yui-input-wrapper {
  display: inline-block;
  width: 100%;
  .yui-input-content {
    position: relative;
    display: inline-flex;
    width: 100%;
    .yui-input {
      display: block;
      width: 100%;
      padding: 8px 12px;
      color: $font-color-default;
      font-size: $font-size-default;
      border-radius: $radius;
      border: 1px solid $default-border-color;
      background: #fff;
      outline: none;
      &::-webkit-input-placeholder {
        color: $font-low-color;
      }
      &:hover {
        border: 1px solid $main-color;
      }
      &:focus {
        border: 1px solid $main-color;
        outline: none;
      }
    }
    .yui-input-icon {
      position: absolute;
      top: 10px;
      right: 12px;
      cursor: pointer;
    }
  }

  // 在前面添加前缀
  &.yui-input-prepend {
    display: flex;
    .yui-input-left {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      padding: 0 12px;
      font-size: 14px;
      color: $font-color-default;
      background: $B050;
      border: 1px solid $default-border-color;
      border-right: none;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }
    .yui-input {
      border-left: none;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      &:focus {
        border: 1px solid $default-border-color;
        border-left: none;
      }
    }
    &:hover {
      .yui-input {
        border: 1px solid $main-color;
        border-left: none;
      }
      .yui-input-left {
        border: 1px solid $main-color;
        border-right: none;
      }
    }
  }
  // 在后面添加后缀
  &.yui-input-append {
    display: flex;
    .yui-input-right {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      padding: 0 12px;
      font-size: $font-size-default;
      color: $font-color-default;
      background: #f7f7fa;
      border: 1px solid $default-border-color;
      border-left: none;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }
    .yui-input {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      &:focus {
        border: 1px solid $default-border-color;
        border-right: none;
      }
    }
    &:hover {
      .yui-input {
        border: 1px solid $main-color;
        border-right: none;
      }
      .yui-input-right {
        border: 1px solid $main-color;
        border-left: none;
      }
    }
  }

  // 都有
  &.yui-input-append.yui-input-prepend {
    .yui-input {
      border-right: none;
      border-left: none;
    }
  }

  // size
  &.yui-input-lg {
    .yui-input {
      padding: 10px 12px;
      font-size: $font-size-lg;
    }
  }
  &.yui-input-sm {
    .yui-input {
      padding: 5px 12px;
      font-size: $font-size-default;
    }
  }
  &.yui-input-xs {
    .yui-input {
      padding: 2px 12px;
      font-size: 12px;
    }
  }

  // default disabled
  &.yui-input-disabled {
    cursor: not-allowed;
    .yui-input {
      cursor: not-allowed;
      color: $disabeld-font-color;
      background: $B050;
      &::-webkit-input-placeholder {
        color: $disabeld-font-color;
      }
      &:hover {
        border: 1px solid $default-border-color;
      }
    }
  }
  &.yui-input-prepend.yui-input-disabled {
    .yui-input-left {
      color: $disabeld-font-color;
      border: 1px solid $default-border-color;
      border-right: none;
    }
    .yui-input {
      border-left: none;
    }
    &:hover {
      .yui-input {
        border: 1px solid $default-border-color;
        border-left: none;
      }
    }
  }
  &.yui-input-append.yui-input-disabled {
    .yui-input-right {
      color: $disabeld-font-color;
      border: 1px solid $default-border-color;
      border-left: none;
    }
    .yui-input {
      border-right: none;
    }
    &:hover {
      .yui-input {
        border: 1px solid $default-border-color;
        border-right: none;
      }
    }
  }
  &.yui-input-prepend.yui-input-append.yui-input-disabled {
    .yui-input-right, .yui-input-left {
      color: $disabeld-font-color
    }
    .yui-input {
      border-left: none;
    }
  }
}
